<template>
	<view>
		<scroll-view class="scroll-view" scroll-y="true" @scrolltolower="lower"  :style="'height:'+scriptHeight+'px'">
		<view class="item" v-for="(item,index) in list" :key="index" @click="toUrl(item.cid)">
			<!-- <view class="zero">
				{{index}}
			</view> -->
			<view class="other">
				<view class="first">
					<view>{{item.title}}</view>
				</view>
				 <view class="second">
					 <view class="second-text">第{{item.guan}}局</view>
					 <view class="second-text">第{{item.score+1}}关</view>
					 <view class="second-text">正确答案：{{item.answer}}</view>
					 <view class="second-text">您的答案：{{item.user_answer}}</view>
				 </view>
			</view>
			
			 <view class="third" v-if="item.answer != item.user_answer">
				 x
			 </view>
			
		</view>
		</scroll-view>
		
	</view>
</template>

<script>
	import unils from "../../../unils/utils.js"
	export default {
		data() {
			return {
				'scriptHeight':400,
				'list':[],
				'openid':"",
				'currentPage':1,
				'flag':false,
			}
		},
		onReady() {
			this.scriptHeight = uni.getSystemInfoSync().windowHeight;
		},
		onLoad() {
			this.openid = uni.getStorageSync('openid');
			this.initData();	
		},
		
		methods: {
			toUrl:function(id){
				uni.navigateTo({
					url:"../../article_cy/article_cy?id="+id,
				})
			},
			lower:function(){
				console.log('scrolltolower');
				if(this.flag){
					this.initData();
				}
			},
			initData:function(){
				uni.showLoading({title: '加载中',mask:true});
				let that = this;
				that.flag = false;
				uni.request({
					url: that.websiteUrl+'/eg_easy_game_record',
					method:'POST',
					header: {
					        'x-requested-with': 'xmlhttprequest' //自定义请求头信息
					    },
					data:{
						'openid':that.openid,
						'c_page':that.currentPage,
					},
					success:(res)=>{
						if(res.data.code != 1){
							uni.showToast({
								title:res.data.msg,
								duration:2000,
								icon:'none',
							})
						} else {
							that.list = that.list.concat(res.data.data);
							that.currentPage++;
						}
					},
					complete: (res) => {
						that.flag = true;
						setTimeout(function () {uni.hideLoading();}, 100);
					},
				})
			}
		}
	}
</script>

<style lang="scss">
.scroll-view{
	// padding-bottom: 10px;
	// height: 454px;
	background-color: $uni-scroll-bg-clolr;
	.item{
		position: relative;
		display: flex;
		// flex-direction: column;
		margin: 10px;
		color:$uni-text-color;
		
		align-items: center;
		background-color: $uni-bg-color;
		border-radius: 5px;
		.zero{
			display: flex;
			align-items: center;
			justify-content: center;
			// padding:10px;
			width:10%;
			// background-color: #007AFF;
		}
		.other{
			width:90%;
			.first{
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 16px;
				margin:10px 0;
			}
			.second{
				display: flex;
				flex-direction: row;
				font-size:13px;
				margin-bottom: 10px;
				justify-content: space-around;
				.second-text{
					// color: #007AFF;
					margin: 0 5px;
					
				}
			}
		}
		
		.third{
			position: absolute;
			top:0;
			left:90%;
			right:0;
			font-size: 48px;
			// margin: 0 auto;
			color: $uni-primary-color;
		}
	}
}
</style>
